<template>
  <nly-content-wrapper>
    <nly-content-header>
      <nly-row class="col-12">
        <nly-row class="col-12 ">
          <nly-col
            xs="12"
            sm="12"
            md="12"
            lg="9"
            xl="9"
            class="form-inline"
            style="justify-content: left;"
          >
            <!-- <i :class="this.$route.meta.icon + ' text-info'" class="icon" ></nly-icon>
            <span>{{this.$route.name}}</span>-->
          </nly-col>
          <nly-col
            xs="12"
            sm="12"
            md="12"
            lg="3"
            xl="3"
            class="form-inline align-self-start"
            style="justify-content: right;"
          >
            <nly-button-group>
              <nly-button variant="info" @click="PageList" button-class="mr-2">查询</nly-button>
              <nly-button variant="info" button-class="mr-2" @click="reset">重置</nly-button>
              <nly-button @click="showFunction" variant="info" button-class="mr-2">
                <i :class="show ? 'fas fa-angle-down mr-1' : 'fas fa-angle-up mr-1'" />
                {{ show ? "折叠" : "展开" }}
              </nly-button>
            </nly-button-group>
          </nly-col>
        </nly-row>
        
        <nly-row class="ml-1 mb-2 lr mt-4" v-show="show">
          <nly-col
            xs="12"
            sm="12"
            md="12"
            lg="12"
            xl="12"
            class="form-inline"
            style="justify-content: left;"
          >
            <form-input
              title="流程名称"
              id="processName"
              labelStyle
              rightStyle="width:120px;"
              class="ml-2"
              v-show="show"
              v-model="postData.processName"
            ></form-input>
            <form-select
              title="审核结果"
              class="ml-2"
              rightStyle="width:120px;"
              v-model="postData.approvalResult"
              :dataList="[
                { key: 0, title: '待审核' },
                { key: 1, title: '通过' },
                { key: 2, title: '不通过' },
                { key: 3, title: '关闭' }
              ]"
            ></form-select>
          </nly-col>
        </nly-row>
      </nly-row>
      <nly-container fluid></nly-container>
    </nly-content-header>
    <div class="tabpanel_tab_spacer"></div>
    <div>
      <a-button
        type="primary"
        class="crm-btn"
        @click="saveItem(1)"
      >审核通过</a-button>
      <a-button
        type="primary"
        class="crm-btn"
        @click="saveItem(2)"
      >审核驳回</a-button>
    </div>
    <nly-content>
      <!-- 列表 -->
      <a-table
        :columns="columns"
        :components="components"
        :data-source="data"
        :scroll="{ y: 500}"
        bordered
        :pagination="pagination"
        @change="onTableChange"
        :row-selection="{selectedRowKeys: selectedKeys, onChange: selection}"
      ></a-table>

      <a-modal v-model="approvalVisible" title="审核意见" centered on-ok="handleok" width="400px">
        <div>
          <a-textarea placeholder="请输入审核意见" :rows="8" v-model="approvalOpinion" />
        </div>
        <template slot="footer">
          <a-button key="submit" type="primary" @click="approvalAll">确定</a-button>
          <a-button key="back" @click="() => (approvalVisible = false)">关闭</a-button>
        </template>
      </a-modal>

      <a-modal v-model="detailVisible" title="详情" centered on-ok="handleok" width="500px">
        <div>
           <a-form  :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-form-item label="审批内容">
              <a-input title="审批内容"  v-model="processContent" />
            </a-form-item>
          </a-form> 
          <a-form  :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-form-item label="审批意见">
              <a-textarea title="审批意见" :rows="5" v-model="approvalOpinion" />
            </a-form-item>
          </a-form> 
        </div>
        <template slot="footer">
          <a-button key="back" @click="() => (detailVisible = false)">关闭</a-button>
        </template>
      </a-modal>
    </nly-content>
  </nly-content-wrapper>
</template>

<script>
import { FormInput, FormSelect } from "@/components/Form";
import { save, pageList } from "@/api/work/approval";
import { listToMap } from "@/utils/tool/map";
import { components } from "@/utils/antTableComponents";
import Vue from "vue";
const basePostData = {
  "current": 1,
  "size": 20
};

export default {
  components: {
    FormInput,
    FormSelect
  },
  data() {
    const columns = [
      {
        title: "审批内容",
        dataIndex: "processName",
        key: "processName",
        width: 120
      },
      {
        title: "审批人",
        dataIndex: "approvalUserName",
        key: "approvalUserName",
        width: 120
      },
      {
        title: "审批类型",
        dataIndex: "approvalType",
        key: "approvalType",
        width: 120,
        customRender: (val, row) => {
          const type = ["客户审批", "入职审批", "离职审批", "任务审批"];
          return type[val - 1];
        }
      },
      {
        title: "申请时间",
        dataIndex: "createDate",
        key: "createDate",
        width: 120
      },
      {
        title: "审批时间",
        dataIndex: "approvalDate",
        key: "approvalDate",
        width: 120
      },
      {
        title: "审批结果",
        dataIndex: "approvalResult",
        key: "approvalResult",
        width: 120,
        customRender: (val, row) => {
          const type = ["待审核", "通过", "不通过", "关闭"];
          return type[val];
        }
      },
      {
        title: "审批意见",
        dataIndex: "approvalOpinion",
        key: "approvalOpinion",
        width: 120
      },
      {
        title: "操作",
        dataIndex: "id",
        key: "id",
        width: 120,
        customRender: (text, row) => {
          return (
            <div class="icons-list">
              <a href="javascript:;" title="查看详情" class="mr-1"  onClick={() => this.showDetail(row)}>
                查看详情
              </a>
            </div>
          );
        }
      }
    ];

    //表格 头部 可伸缩
    this.components = components(columns);
    return {
      fileList: [],
      postData: { ...basePostData },
      data: [],
      count: 0,
      columns,
      validateStatus: "success",
      isShow: "display:block",
      form: this.$form.createForm(this, { name: "advanced_search" }),
      errorMsg: null,
      isDisabled: false,
      pagination: {
        defaultPageSize: 20,
        current: 1,
        pageSize: 20,
        total: 0,
        showTotal: total => {
          return (
            <div>
              共 {total} 条数据，每页
              <a-input-number
                value={this.pagination.pageSize}
                min={1}
                max={500}
                onPressEnter={e => this.changePageSize(e)}
              />
              条
            </div>
          );
        },
        showQuickJumper: true,
        showLessItems: true
      },
      show: false, //是否显示
      editItem: {}, //新增/编辑对象
      selectedKeys: [],
      selectedIds: [],
      selectedData: [],
      approvalVisible: false, //审批弹窗
      approvalOpinion: "",
      approvalTypeB: 1,
      detailVisible: false, //详情弹窗
      processContent: "" 
    };
  },
  mounted() {
    this.PageList();
  },
  methods: {
    //查看详情
    showDetail(data) {
      this.detailVisible = true;
      this.approvalOpinion = data.approvalOpinion;
      this.processContent = data.processName;
    },
    // 获取列表
    PageList() {
      const { postData } = this;
      pageList(postData)
        .then(response => {
          if (response.code === 200) {
            const { data } = response;
            const { records, total, current, size } = data;
            this.data = records;
            Object.assign(this.pagination, {
              total
            });
          }
        })
        .catch(error => {});
    },
    handleAdd() {
      const { count, detailData } = this;
      const newData = {
        key: count,
        commodityName: "",
        price: "",
        discount: "",
        counts: "",
        specs: "",
        totalPrice: ""
      };
      this.detailData = [...detailData, newData];
      this.count = count + 1;
    },
    //获取
    showFunction() {
      this.show = !this.show;
    },
    //表单重置
    handleReset() {
      this.form.resetFields();
    },
    saveItem(type) {
      this.approvalTypeB = type; 
       this.approvalOpinion = "";
      this.approvalVisible = true;
    },
    //保存审批
    approvalAll() {
      this.approvalOpinion = "";
      if (this.selectedKeys.length < 1) {
         this.$message.warn("请选择要审核的数据");
        return false;
      }
      console.log(" this.approvalTypeB",  this.approvalTypeB);
      const formData = new FormData();
      formData.append("ids", this.selectedIds);
      formData.append("content", this.approvalOpinion);
      formData.append("type", this.approvalTypeB);
      save(formData)
        .then(response => {
          if (response.code === 200) {
             this.$message.success("审核完成！");
            // this.$nlyaToast.toast("审核完成！", {
            //   title: `提示`,
            //   variant: "success",
            //   solid: true
            // });
            //刷新 列表
            this.PageList();
            this.approvalVisible = false;
            this.selectedKeys = [];
          } else {
             this.$message.error(response.message);
            // this.$nlyaToast.toast(response.message, {
            //   title: `错误`,
            //   variant: "danger",
            //   solid: true
            // });
          }
        })
        
    },
    selection(keys, info) {
      this.selectedKeys = keys;
      const ids = new Array();
      info.forEach(function(val) {
        ids.push(val.id);
      });
      this.selectedIds = ids;
      this.selectedData = info;
    },
    onTableChange(pagination, filters, sorter) {
      Object.assign(this.postData, {
        "current": pagination.current,
        "size": pagination.pageSize
      });
      Object.assign(this.pagination, {
        current: pagination.current,
        pageSize: pagination.pageSize
      });
      this.PageList();
    },
    changePageSize(e) {
      const value = e.target.value;
      const { pagination } = this;

      console.log(e, value);
      Object.assign(this.postData, {
        "size": value
      });
      Object.assign(this.pagination, {
        pageSize: Number.parseInt(value)
      });
      this.PageList();
    },
    reset() {
      this.postData = { ...basePostData };
    },
    onCellChange(key, dataIndex, value) {
      const dataSource = [...this.detailData];
      const target = dataSource.filter(item => key === item.key)[0];
      if (target) {
        target[dataIndex] = value;
        this.detailData = dataSource;
      }
    }
  },
  watch: {}
};
</script>
<style scoped>
.form-inline label {
  justify-content: left !important;
}
.form-inline > .col {
  margin-bottom: 1.5rem !important;
}
.icons-list >>> .anticon {
  margin-right: 8px;
  font-size: 16px;
}
.ant-advanced-search-form {
  padding: 24px;
  background: #fbfbfb;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}

/* tile uploaded pictures */
.upload-list-inline >>> .ant-upload-list-item {
  float: left;
  width: 200px;
  margin-right: 8px;
}
.upload-list-inline >>> .ant-upload-animate-enter {
  animation-name: uploadAnimateInlineIn;
}
.upload-list-inline >>> .ant-upload-animate-leave {
  animation-name: uploadAnimateInlineOut;
}
.ant-popover-inner {
  z-index: 2999;
}
/* .crm-btn {
  margin-left: 10px;
  margin-bottom: 10px;
} */
</style>
